<template>
	<view class="container">
		<view class="table">
			<view class="search" style="padding: 10rpx 20rpx">
				<u-search placeholder="商品编号,商品拼音搜索" :clearabled="false" :showAction="true" v-model="keyword"
					@custom="search" @clear="clear" @search="search"></u-search>
			</view>
			<view class="item">
				<view class="item_left">
					<scroll-view scroll-y enable-flex>
						<view class="item_left_li u-line-1" v-for="(item, index) in cateList" :key="index"
							:class="index == leftIndex ? 'active' : ''" @click="changeLeft(index)">
							{{ item.sblbmz }}
						</view>
					</scroll-view>
				</view>
				<view class="item_right">
					<scroll-view :scroll-y="true" enable-flex>
						<view class="item_right_li" v-for="(item, index) in dataList" :key="index">
							<view class="logo">
								<u--image :src="'/static/upload/'+scanType+'/' + item.sbjbbh + '.jpg'" width="180rpx"
									height="140rpx"></u--image>
							</view>
							<view class="con">
								<view class="title u-line-1">{{ item.sbjbmz }}</view>
								<view class="sale">单位:{{ item.sbjbjldw }}</view>
								<view class="price">
									<view class="l">¥{{ item.sbjblsjg }}</view>
									<view class="r">
										<u-number-box v-model="item.number" :asyncChange="true" :name="index" :min="0"
											@change="ChangeVal"></u-number-box>
									</view>
									<!-- <view class="r" else @click="item.number++">
										<u-icon name="plus-circle" size="24"></u-icon>
									</view> -->
								</view>
							</view>
						</view>
						<view style="height: 130rpx"></view>
					</scroll-view>
				</view>
			</view>
			<view class="footer">
				<view class="btn" @click="next">
					<text>我的订单</text>
					<text class="dage">{{ number }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftIndex: 0,
				rightIndex: 0,
				cateList: [],
				dataList: [],
				zzmz: '',
				keyword: '',
				number: 0,
				internalId: null,
				scanType:''
			};
		},
		watch: {
			// dataList: {
			// 	handler: function (data) {
			// 		let number = 0;
			// 		data.forEach((item) => {
			// 			number += item.number;
			// 		});
			// 		this.number = number;
			// 	},
			// 	deep: true
			// }
		},
		onLoad({
			zzmz
		}) {
			if (zzmz) {
				this.zzmz = zzmz;
				uni.setNavigationBarTitle({
					title: zzmz + '的点餐'
				});
			}
			const scancode = uni.getStorageSync('scanCode')
			if(scancode){
				this.scanType = scancode.type
			}
			this.getInfo();
			this.getNum();
		},
		onHide() {
			console.log('页面已经隐藏')
			if (this.internalId) {
				clearInterval(this.internalId)
			}
		},
		onBackPress() {
			console.log('页面已经关闭')
			if (this.internalId) {
				clearInterval(this.internalId)
			}
		},
		
		methods: {
			clear() {
				this.keyword = '';
				this.getInfo();
			},

			search() {
				let _this = this;
				if (!this.keyword) {
					this.getInfo();
					return;
				}
				uni.showLoading({
					title: '搜索中',
					mask: true
				});
				_this
					.$http('dish/search', {
						keyword: _this.keyword,
						zzmz: _this.zzmz
					})
					.then((res) => {
						if (res.code) {
							uni.hideLoading();
							_this.dataList = res.data;
						}
					});
			},
			ChangeVal(e) {
				let _this = this;
				uni.showLoading({
					title: '修改中',
					mask: true
				});
				let item = this.dataList[e.name];
				_this
					.$http('dish/changeNumber', {
						...item,
						number: e.value,
						zzmz: _this.zzmz
					})
					.then((res) => {
						uni.hideLoading();
						if (res.code) {
							this.dataList[e.name].number = e.value;
						} else {
							this.$u.toast(res.msg);
						}
						_this.getNum();
					});
			},
			getNum() {
				let _this = this;
				_this
					.$http('order/getZzmzNum', {
						zzmz: _this.zzmz
					})
					.then((res) => {
						if (res.code) {
							this.number = res.data.number;
							if (!this.number) {
								this.number = 0;
							}
							this.number = this.number % 1 === 0 ? this.number.toFixed(0) : this.number.toFixed(1);
						}
					});
			},
			getInfo() {
				let _this = this;
				_this.$http('dish/getCate').then((res) => {
					if (res.code) {
						_this.cateList = res.data;
						_this.getData();
					}
				});
			},
			getData() {
				let _this = this;
				_this
					.$http('dish/getData', {
						sbjbsblb: _this.cateList[_this.leftIndex]['sblbmz'],
						zzmz: _this.zzmz
					})
					.then((res) => {
						if (res.code) {
							_this.dataList = res.data;
							_this.dataList.map((item) => {
								if (!item.number) {
									item.number = 0;
								}
							});
						}
					});
			},
			changeLeft(index) {
				this.leftIndex = index;
				this.getData();
			},
			next() {
				uni.navigateTo({
					url: '/pages/order/order?zzmz=' + this.zzmz
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.table {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.search {
			height: 80rpx;
			background-color: #f9ae3d;
		}

		.item {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex: 1;
			overflow: hidden;

			&_left {
				width: 220rpx;
				background-color: #eee;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 100%;
				overflow: auto;

				&_li {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					width: 100%;
					text-align: center;
					border-bottom: 1rpx solid #ccc;
					white-space: nowrap;
					overflow: hidden;
				}

				.active {
					background-color: #fff;
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			&_right {
				flex: 1;
				height: 100%;
				overflow: auto;

				&_li {
					flex: 1;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.logo {
						margin-right: 20rpx;
					}

					.con {
						flex: 1;
					}

					.title {
						flex: 1;
					}

					.sale {
						flex: 1;
						font-size: 28rpx;
						color: #747474;
					}

					.price {
						flex: 1;
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}

		.footer {
			height: 100rpx;
			position: relative;
			bottom: var(--window-bottom);
			width: 100%;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			justify-items: center;
			background-color: #fff;
			padding-top: 20rpx;

			.btn {
				margin-bottom: 20rpx;
				background-color: #ff6700;
				width: max-content;
				padding: 20rpx 40rpx 20rpx 130rpx;
				border-radius: 20rpx;
				color: #fff;
				position: relative;

				.dage {
					position: absolute;
					top: -10rpx;
					left: 20rpx;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #f9ae3d;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					font-size: 60rpx;
				}
			}
		}
	}
</style>